<template>
  <div>
    <button @click="fn">按钮</button>
    {{ msg }}
    <hr />
    <HelloWorld class="box" a="哈哈哈哈" title="这是传递的数据" @piapia="fn2" />
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  /* 
    生命周期钩子，也是组合式api入口， 一切代码都定义 setup中
  */
  setup() {
    let msg = "你好vue3";
    const fn = () => {
      msg = "值改变了";
      console.log(msg);
    };

    const fn2 = (msg) => {
      console.log("我收到了", msg);
    };

    // 返回对象属性和方法 会暴露给 模板
    return {
      msg,
      fn,
      fn2,
    };
  },
  components: {
    HelloWorld,
  },
};
</script>

<style lang="scss" scoped></style>
